<template>
  <view class="mine">
    <!-- 1.0 导航栏 -->
    <u-navbar back-icon-name="bell"
              title="我的"
              :background="navbar"
              :border-bottom="false"
              title-color="#303133"
              title-bold></u-navbar>
    <!-- immersive -->
    <!-- 2.0 用户信息 -->
    <view class="avatar">
      <!-- 2.1 头像 -->
      <u-avatar :src="userInfo&&userInfo.avatar"
                size="130"
                show-sex
                :show-level="token!==null"
                :sex-icon="userInfo&&userInfo.user_sex==='女'?'women':'man'"></u-avatar>
      <!-- 2.2 储值用户 - 登录 -->
      <view class="type"
            v-if="token">
        <u-tag text="VIP"
               type="warning"
               size="mini"
               mode="dark" />
        <u-tag text="储值用户"
               type="warning"
               size="mini" />
      </view>
      <!-- 2.3 用户名 -->
      <h4>{{userInfo&&userInfo.username||'火星网友'}}</h4>
    </view>
    <view class="container">
      <!-- 3.0 储值信息 - 登录  -->
      <u-grid :col="5"
              v-if="token"
              :border="false"
              align="center"
              class="money-info">
        <u-grid-item>
          <h3>￥{{userInfo.money||'999'}}</h3>
          <view class="grid-text">余额</view>
        </u-grid-item>
        <u-grid-item>
          <view class="grid-text">|</view>
        </u-grid-item>
        <u-grid-item>
          <h3>{{userInfo.point||'777'}}</h3>
          <view class="grid-text">积分</view>
        </u-grid-item>
        <u-grid-item>
          <view class="grid-text">|</view>
        </u-grid-item>
        <u-grid-item>
          <u-icon name="rmb-circle"
                  :size="40"></u-icon>
          <view class="grid-text">储值卡</view>
        </u-grid-item>
      </u-grid>
      <!-- 4.0 我的福利 - 登录 -->
      <Gift v-if="token"></Gift>

      <!-- 5.0 营销服务 - 登录 -->
      <Market v-if="token"></Market>

      <!-- 6.0 其他服务 -->
      <Server></Server>
    </view>
    <view class="handle">
      <u-button ripple
                @click="btn"
                :type="token?'default':'primary'">
        {{token?'退出':''}}登录
      </u-button>
    </view>
    <!-- 模态框 -->
    <u-modal v-model="show"
             mask-close-able
             :show-title='false'
             show-cancel-button
             confirm-text='去意已决'
             cancel-text='再想想'
             content="确认退出？"
             @confirm='handleLogout'></u-modal>

    <!-- tabbar -->
    <u-tabbar :list="tabBar"
              :mid-button="true"></u-tabbar>
  </view>
</template>

<script>
import { mapGetters } from 'vuex'
import Market from './components/market/market.vue'
import Gift from './components/gift/gift.vue'
import Server from './components/server/server.vue'

export default {
  components: { Market, Gift, Server },
  computed: mapGetters(['tabBar', 'token', 'userInfo']),
  name: 'mine',
  data() {
    return {
      navbar: {
        backgroundColor: '#E8E8E8',
      },
      show: false,
    }
  },
  // 屏幕滚动
  onPageScroll(options) {
    const { scrollTop } = options
    this.navbar.backgroundColor = scrollTop > 44 ? '#FFF' : '#E8E8E8'
  },
  methods: {
    handleLogout() {
      this.$store.dispatch('user/logout')
      this.$u.toast('退出登录')
    },
    btn() {
      if (this.token) return (this.show = true)
      if (!this.tokne) return this.$Router.push('/pages/login/login')
    },
  },
}
</script>

<style lang="scss" scoped>
.handle {
  margin: 50rpx 0;
}
.mine {
  background-color: #fafafa;
}
.avatar {
  height: 300rpx;
  width: 100vw;
  background-color: #e8e8e8;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}
.grid-text {
  margin-top: 20rpx;
  color: $u-type-info;
  font-size: 30rpx;
}
.container {
  background-color: #fff;
  width: 100vw;
  padding: 0 20rpx;
  .money-info {
    padding: 0 30rpx;
    .grid-text {
      // color: $u-type-info;
      margin-top: 10rpx;
      font-size: 25rpx;
    }
  }
  .title {
    height: 100rpx;
    line-height: 100rpx;
  }
}
</style>
